<template>
  <DrawerMenu v-if="useOpenMenuStore().isMenuOpen"></DrawerMenu>
  <div
    :class="{
      'crane-main': !useOpenMenuStore().isMenuOpen,
      'crane-main-transform': useOpenMenuStore().isMenuOpen
    }"
    @scroll="getScrollPercentage"
  >
    <RouterLoading v-if="useRouterStore().isInRouter"></RouterLoading>
    <ScreenBackground></ScreenBackground>
    <Header></Header>
    <div
      :class="{
        animation: useRouterStore().isInRouter,
        'animation-after': !useRouterStore().isInRouter
      }"
    >
      <router-view></router-view>
    </div>
    <Menu></Menu>
    <Footer></Footer>
    <el-backtop
      v-if="data.isPC && !useOpenMenuStore().isMenuOpen"
      style="z-index: 10000000000"
      :right="100"
      :bottom="100"
      target=".crane-main"
    />
  </div>
  <Tools v-if="!data.isPC" :count="data.scrollPercentage"></Tools>
</template>

<script setup lang="ts">
import ScreenBackground from './components/ScreenBackground.vue';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Menu from '@/components/Menu.vue';
import RouterLoading from '@/components/RouterLoading.vue';
import useRouterStore from '@/store/modules/router.store.ts';
import { onMounted, onUnmounted, reactive } from 'vue';
import Tools from '@/components/Tools.vue';
import useOpenMenuStore from '@/store/modules/openMenu.store.ts';
import DrawerMenu from '@/components/DrawerMenu.vue';

const minWidth = 1160;

const data = reactive({
  isPC: true,
  scrollPercentage: 0
});

onMounted(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

function handleResize() {
  data.isPC = window.innerWidth > minWidth;
}

function getScrollPercentage(e: Event): void {
  const ele = e.target as HTMLElement;
  const scrollTop = ele.scrollTop;
  const scrollHeight = ele.scrollHeight;
  const clientHeight = ele.clientHeight || window.innerHeight;

  const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
  data.scrollPercentage = Number(scrollPercentage.toFixed(0));
}

const touchArea = document.getElementById('app');

let startX: number;
let startY: number;

touchArea?.addEventListener(
  'touchstart',
  (event: TouchEvent) => {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
  },
  { passive: true }
);

touchArea?.addEventListener(
  'touchend',
  (event: TouchEvent) => {
    const endX = event.changedTouches[0].clientX;
    const endY = event.changedTouches[0].clientY;

    const deltaX = endX - startX;
    const deltaY = endY - startY;

    if (deltaX > 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
      // 从左向右滑动

      useOpenMenuStore().setMenuStatus(true);
    }
    if (deltaX < 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
      // 从右向左滑动
      useOpenMenuStore().setMenuStatus(false);
    }
  },
  { passive: true }
);

onUnmounted(() => {
  touchArea?.removeEventListener('touchstart', () => {});
  touchArea?.removeEventListener('touchend', () => {});
});
</script>

<style>
.crane-main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
  transition: all 0.3s;
}

.crane-main-transform {
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-height: 100vh;
  transform: translate3d(302px, 0px, 0px) scale3d(0.86, 0.86, 1);
  border-radius: 20px;
  transition: all 0.3s;
}

.router {
  width: 78vw;
  z-index: 50;
  margin: 0 auto;
  position: relative;
}

.animation {
  margin-top: 60px;
  transition: all 0.5s;
}

.animation-after {
  margin-top: 0;
}
</style>
